<template>
	<view class="goods-main">
		<z-paging style="height: 100% !important;" class="wrap" ref="paging" v-model="goodsList" @query="queryList">
			<cu-custom slot="top" bgColor="bg-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">备件数据</block>
			</cu-custom>
			<unifab v-if="false" @dragClick="createSpare" creatTop="70" creatLeft="85" image="../../static/jia.png" imageWidth="60upx">
			</unifab>
			<sl-filter :themeColor="themeColor" :menuList="menuList" @result="result" @resetMenuList="resetMenuList"></sl-filter>
			<view slot="top" class="search">
				<u-search placeholder="请输入备件名称/技术特性等搜索" v-model="getData.KeyWord" @custom='search()' @search='search()'></u-search>
			</view>
			<!-- 商品列表开始 -->
			<view v-for="(item, index) in goodsList" class="goods-item-wrap">
				<image :src="baseImage+item.Image" class="goods-image"/>
				<view class="goods-content-wrap">
					<view class="goods-name">
						{{ item.Name }}
					</view>
					<view class="goods-stock-wrap">
						<view class="goods-stock">型号：{{ item.Model }} </view>
						<view class="goods-sell-count">单位：{{ item.Unit }}</view>
					</view>
					<view class="goods-stock-wrap">
						<view class="goods-stock">供应商：{{ item.Supplier }}</view>
					</view>
					<view class="goods-stock-wrap">
						<view class="goods-stock">库存上下限：{{ item.MinCounts }}-{{ item.MaxCounts }}</view>
					</view>
					<view class="goods-price">库存：{{ item.Number }}</view>
				</view>
			</view>
			<!-- 商品列表结束 -->
		</z-paging>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import unifab from "@/components/beyondGod-drag/beyoundGod-drag.vue";	
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	export default {
		components: {
			slFilter,unifab
		},
		data() {
			return {
				goodsList: [],
				getData:{
					KeyWord:'',
					PageIndex:1,
					PageSize:10,
					Sort: 'AddTime',
					SortType: 'desc',
					Model:'', //型号 
					Supplier:'', //供应商
					store:'', //仓库
					fsclass:'',//附件类型
					spareType:1,
				},
				baseImage:this.$request22.baseUrl1,
				spareNoData:this.$request22.baseUrl1+'/Resource/Sg/spare/sparenodata.png',
				themeColor: '#0079FE',
				filterResult: '',
				menuList: [{
						'title': '供应商',
						'detailTitle': '供应商可多选',
						'isMutiple': true,
						'key': 'deviceclass',
						'detailList': [{
								'title': '不限',
								'value': ''
							}
						]

					},
					{
						'title': '型号',
						'detailTitle': '型号可多选',
						'isMutiple': true,
						'key': 'keshi',
						'detailList': [{
								'title': '不限',
								'value': ''
							}
						]
				
					},
					{
						'title': '仓库',
						'detailTitle': '',
						'isMutiple': false,
						'key': 'store',
						'detailList': [{
								'title': '不限',
								'value': ''
							}
						]
				
					},
					{
						'title': '备件类型',
						'detailTitle': '',
						'isMutiple': false,
						'key': 'fsclass',
						'detailList': [{
								'title': '不限',
								'value': ''
							}
						]
				
					}
				]
			}
		},
		onLoad(options) {
			let that=this
			if(options.spareType!=null&&options.spareType!=''&&options.spareType!=undefined){
				that.getData.spareType=options.spareType
			}
			that.getSearchOptions()
		},
		methods: {
			createSpare(){
				uni.navigateTo({
					url: '/pages-device/spare/addspare'
				})
			},
			resetMenuList(){
				console.log('resetMenuList')
			},
			getSearchOptions(){
				let that=this
				let opts = {
					url: 'spareapi/GetSpareSearchOptions',
					method: 'get'
				};
				request.httpTokenRequest(opts).then(res => {
					if(res.data.code == 1){
						console.log(res.data.data)
						let deviceclass =res.data.data.Item2
						let keshi = res.data.data.Item1
						let store = res.data.data.Item3
						let fsclass = res.data.data.Item4
						
						//类别
						if(deviceclass.length>0){
							let datalist=[]
							let entity={
								title:'不限',
								value:''
							}
							datalist.push(entity)
							for(let i=0;i<deviceclass.length;i++){
								let entity={
									title:deviceclass[i].data,
									value:deviceclass[i].data
								}
								datalist.push(entity)
							}
							that.menuList[0].detailList=datalist
						}
						//科室
						if(keshi.length>0){
							let datalist=[]
							let entity={
								title:'不限',
								value:''
							}
							datalist.push(entity)
							for(let i=0;i<keshi.length;i++){
								let entity={
									title:keshi[i].data,
									value:keshi[i].data
								}
								datalist.push(entity)
							}
							that.menuList[1].detailList=datalist
						}
						//仓库
						if(store.length>0){
							let datalist=[]
							let entity={
								title:'不限',
								value:''
							}
							datalist.push(entity)
							for(let i=0;i<store.length;i++){
								let entity={
									title:store[i].data,
									value:store[i].data
								}
								datalist.push(entity)
							}
							that.menuList[2].detailList=datalist
						}
						//备件类型
						if(fsclass.length>0){
							let datalist=[]
							let entity={
								title:'不限',
								value:''
							}
							datalist.push(entity)
							for(let i=0;i<fsclass.length;i++){
								let entity={
									title:fsclass[i].data,
									value:fsclass[i].data
								}
								datalist.push(entity)
							}
							that.menuList[3].detailList=datalist
						}fsclass
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			result(val) {
				console.log(val)
				let deviceclass=val.deviceclass
				let keshi=val.keshi
				let store=val.store
				let fsclass=val.fsclass
				this.getData.Model=keshi.join()
				this.getData.Supplier=deviceclass.join()
				this.getData.store=store
				this.getData.fsclass=fsclass
				this.queryList(1,10)
				
				this.filterResult = JSON.stringify(val, null, 2)
			},
			queryList(pageNo, pageSize) {
				console.log('queryList')
				var that = this;
				uni.showLoading({
					title: '加载中...'
				})
				let opts = {
					url: 'spareapi/GetSparePageList',
					method: 'get'
				};
				that.getData.PageIndex=pageNo;
				that.getData.PageSize=pageSize;
				request.httpTokenRequest(opts,that.getData).then(res => {
					if(res.data.code == 1){
						this.$refs.paging.complete(res.data.data);
						//that.goodsList=res.data.data
						uni.hideLoading();
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			// 搜索框
			search(e){
				let that=this
				that.goodsList=[]
				that.getData.PageIndex=1;
				that.getData.PageSize=10;
				that.getData.KeyWord=e
				this.queryList(1,10);
			},
		}
	}
</script>

<style scoped>
	.search{
		width: 100%;
		height: 100rpx;
		padding: 20rpx 2% 0 2%;
		background-color: #fff;
		// display: flex;
		// align-items: center;
	}
	.goods-main {
		min-height: 100vh;
		background: #f7f8fa;
		padding-top: 0rpx;
		padding-bottom: 240rpx;
	}

	.goods-item-wrap {
		background: #FFFFFF;
		display: flex;
		padding: 24rpx;
		margin: 12rpx;
		border-radius: 8rpx;
	}

	.goods-content-wrap {
		padding-left: 24rpx;
	}

	.goods-option {
		display: flex;
	}

	.goods-option-item {
		background: #f4f4f6;
	}

	.goods-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		flex: none;
	}
	/* 状态色 */
	.stateColor1{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 10rpx solid #fff;
		background-color: #1ab394;
		position: absolute;
		left: -45rpx;
		top: -20rpx;
	}
	.stateColor2{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 10rpx solid #fff;
		background-color: #dd514c;
		position: absolute;
		left: -45rpx;
		top: -20rpx;
	}
	.stateColor3{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 10rpx solid #fff;
		background-color: #224A9F;
		position: absolute;
		left: -45rpx;
		top: -20rpx;
	}
	.goods-name {
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		position: relative;
	}

	.goods-stock-wrap {
		display: flex;
		color: #969696;
		font-size: 24rpx;
		margin-top: 12rpx;
	}

	.goods-stock {
		margin-right: 24rpx;
	}
	.goods-shangxiaxian {
		font-size:24rpx;
		color: #3F71C4;
		margin-top: 14rpx;
	}

	.goods-price {
		font-size:30rpx;
		color: #e7612e;
		margin-top: 18rpx;
	}

	.goods-option-item {
		padding: 8rpx 16rpx;
		border-radius: 36rpx;
		font-size: 24rpx;
		margin-top: 24rpx;
	}

	.goods-option-item:not(:last-child) {
		margin-right: 24rpx;
	}
	/* 需要根据状态改变颜色 */
	.goods-option-item-action {
		background: rgba(26, 179, 148, 0.2);
		color: #1ab394;
	}
	.changeColor1{
		background: rgba(26, 179, 148, 0.2);
		color: #1ab394;
	}
	.changeColor2{
		background: rgba(248, 172, 89, 0.2);
		color: #f8ac59;
	}
	.changeColor3{
		background: rgba(237, 85, 101, 0.2);
		color: #ed5565;
	}
	.goods-item-wrap {
		margin-top: 24rpx;
	}

	.goods-header-wrap {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #FFFFFF;
	}

	.goods-header-item-action {
		font-size: 36rpx;
		font-color: #333333;
		font-weight: bold;
		position: relative;
	}

	.goods-header-item-action::after {
		position: absolute;
		left: 0;
		right: 0;
		background: #4372fe;
		height: 8rpx;
		content: "";
		bottom: -12rpx;
	}

	.goods-header-item {
		margin-right: 24rpx;
	}
</style>
